<template>
  <div class="hr-position-details">
    <PageTemplate>
      <div slot="content">
         <el-form
          :model="userInfo"
          label-position="right"
          label-width="170px"
          class="page-edit-colllapse-form"
          ref="userInfo">
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工号" prop="userNo" :rules="rules">
                  <span v-if="type=='look'">{{userInfo.userNo}}</span>
                  <PersonSelect 
                    v-else
                    @input="personSelect"
                    ref="userNo"
                    :value="userInfo.userNo" 
                    v-bind:multiple="false">
                  </PersonSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name" :rules="rules">
                <span v-if="type=='look'">{{userInfo.name}}</span>
                <el-input v-else class="form-input" size="small" v-model="userInfo.name" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex" :rules="rules">
                <span v-if="type=='look'">{{userInfo.sex}}</span>
                <el-select 
                  v-else
                  v-model="userInfo.sex"  
                  placeholder="请选择"
                  class="form-input"
                  size="small">
                  <el-option 
                    v-for="item in sexMap"
                    :key="item.dictText"
                    :label="item.dictText" 
                    :value="item.dictKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="后台所属模块/分部/所" prop="backendDepartment" :rules="rules">
                <span v-if="type=='look'">{{userInfo.backendDepartment}}</span>
                <el-input v-else  class="form-input" size="small" v-model="userInfo.backendDepartment"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="后台岗位编号" prop="backendNo" :rules="rules">
                <span v-if="type=='look'">{{userInfo.backendNo}}</span>
                <el-input v-else  class="form-input" size="small" v-model="userInfo.backendNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="后台岗位名称" prop="backendName" :rules="rules">
                <span v-if="type=='look'">{{userInfo.backendName}}</span>
                <el-input v-else  class="form-input" size="small" v-model="userInfo.backendName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="前台所属项目部" prop="frontendProject">
                <span v-if="type=='look'">{{userInfo.frontendProject}}</span>
                <el-input v-else class="form-input" size="small" v-model="userInfo.frontendProject"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="前台所属分部" prop="frontendDepartment">
                <span v-if="type=='look'">{{userInfo.frontendDepartment}}</span>
                <el-input v-else class="form-input" size="small" v-model="userInfo.frontendDepartment"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span="12">
              <el-form-item label="前台所属队" prop="frontendQueue">
                <span v-if="type=='look'">{{userInfo.frontendQueue}}</span>
                <el-input v-else class="form-input" size="small" v-model="userInfo.frontendQueue"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="前台岗位编号" prop="frontendNo">
                <span v-if="type=='look'">{{userInfo.frontendNo}}</span>
                <el-input v-else  class="form-input" size="small" v-model="userInfo.frontendNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span="12">
              <el-form-item label="前台岗位名称" prop="frontendName">
                <span v-if="type=='look'">{{userInfo.frontendName}}</span>
                <el-input v-else  class="form-input" size="small" v-model="userInfo.frontendName"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="现工作地" prop="workAddress" :rules="rules">
                <span v-if="type=='look'">{{userInfo.workAddress}}</span>
                <el-input v-else class="form-input" size="small" v-model="userInfo.workAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="row-empty-10"></el-row>
        <el-row>
           <el-button type="primary" @click="savaHandle" v-if="type != 'look'" :loading="submiting" class="loading-submiting">
            {{$t('cm.save')}}
          </el-button>
          <el-button type="primary" @click="back">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import api_hr from '@/api/api_hr'
import sys_manage from '@/api/sys_manage'
import PersonSelect from '@/components/asc/PersonSelect'
export default {
  components: {
    PageTemplate, 
    PersonSelect
  },
  props: {
    // add：新增；edit：编辑; look: 查看
    type: {
      type: String,
      default: "add"
    },
  },
  data () {
    return {
      userInfo: { 

      },
      rules:[{ required: true, message: '必填项',trigger: 'change'}],
      sexMap:[
        {dictText:"男",dictKey:"男"},
        {dictText:"女",dictKey:"女"}
      ],//性别字典
    }
  },
  watch: {
    
  },
  computed: {
    
  },
  created () {
    // this.getAllMap();
    if(this.type != "add") this.getData();

    
  },
  methods: {
     //获取全部字典
    getAllMap(){
      //性别字典
      this.sysDictLoadByPaging("hr_gender",(result)=>{
          this.sexMap = result.data
      })

    },
    
    //获取字典接口
    sysDictLoadByPaging (key,callback) { 
      sys_manage.sysDictLoadByPaging({dictGroupKey: key}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          callback(result)
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    personSelect(data){
      if(data){
        this.$set(this.userInfo,"userNo",COMMON.changePersonSelectData(this.$refs.userNo,false).peopleNumber)
        this.$set(this.userInfo,"name",COMMON.changePersonSelectData(this.$refs.userNo,false).peopleName)
      }
    },
    getData(){
       api_hr.hrUserInfoDetail({
         id:this.$router.history.current.params.id
       }, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.userInfo = result.data;
        } else {
          ALERT.error(result.msg)
        }
      })

    },
    //返回
    back(){
      this.$router.go(-1);//返回上一层
    },
    //保存防抖
    savaHandle: COMMON.debounce('save'),
    // 保存
    save(){
      this.$refs.userInfo.validate((valid, error) => {
        if (valid) {
          const {
            userNo, 
            name, 
            sex,
            backendDepartment,
            backendNo,
            backendName,
            frontendProject,
            frontendDepartment,
            frontendQueue,
            frontendNo,
            frontendName,
            workAddress,
          } = this.userInfo;
          if(this.type == "edit"){
              api_hr.hrUserInfoEdit({
                id:this.$router.history.current.params.id,
                userNo, 
                name, 
                sex,
                backendDepartment,
                backendNo,
                backendName,
                frontendProject,
                frontendDepartment,
                frontendQueue,
                frontendNo,
                frontendName,
                workAddress,
              }, result => {
                if (result.code === Constant.RT_SUCCESS) {
                  this.back();
                } else {
                  ALERT.error(result.msg)
                }
                
              })
          }else{ 
            api_hr.hrUserInfoAdd({
                userNo, 
                name, 
                sex,
                backendDepartment,
                backendNo,
                backendName,
                frontendProject,
                frontendDepartment,
                frontendQueue,
                frontendNo,
                frontendName,
                workAddress,
              }, result => {
                if (result.code === Constant.RT_SUCCESS) {
                  this.back();
                } else {
                  ALERT.error(result.msg)
                }
            })
          }
        }
      });
    },
   
  },
}
</script>

<style lang="scss">
.hr-position-details{
  .el-form{
    background: #fff;
    padding-top: 20px;
  }
  .el-form-item__content>span:empty:before{
    content:"--"
  }
}
</style>
